<template>
  <a-form ref="formRef" label-align="right" :labelCol="{ span: 5 }" :model="formState">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item :label="'运单编号'" :name="'orderId'">
          <a-input allow-clear placeholder="请输入运单编号" v-model:value="formState.orderId" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'id'" :label="'订单编号'">
          <a-input allow-clear placeholder="请输入订单编号" v-model:value="formState.id" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'schedulingStatus'" :label="'调度状态'">
          <a-select placeholder="请选择" v-model:value="formState.schedulingStatus" allow-clear>
            <a-select-option
              v-for="(item, index) in schedulingStatus"
              :key="index"
              v-model:value="item.value"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'startAgencyName'" :label="'起始地机构'">
          <a-tree-select
            :tree-data="treeData"
            placeholder="请选择起始地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
            v-model:value="formState.startAgencyName"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'endAgencyName'" :label="'目的地机构'">
          <a-tree-select
            :tree-data="treeData"
            placeholder="请选择目的地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
            v-model:value="formState.endAgencyName"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'currentAgencyName'" :label="'当前所在机构'">
          <a-tree-select
            :tree-data="treeData"
            placeholder="请选择当前所在机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
            v-model:value="formState.currentAgencyName"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row justify="left" class="buttons">
      <a-space>
        <a-button type="primary" html-type="submit" @click="select">搜索</a-button>
        <a-button @click="onReset">重置</a-button>
      </a-space>
    </a-row>
  </a-form>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { getBusinessHallTreeAPI } from '@/services/businessHall'
const formRef = ref()
defineProps({
  /** 页码 */
  page: {
    type: Number,
    default: 1,
  },
  /** 页容量 */
  pageSize: {
    type: Number,
    default: 10,
  },
})
const emit = defineEmits(['init', 'finish', 'reset', 'update:page', 'update:pageSize'])
// 点击搜索按钮
const select = async () => {
  console.log(formState)
  // 重置页码
  emit('update:page', 1)
  // 重新获取数据
  emit('finish', formState)
}
// 表单初始化
onMounted(() => {
  emit('init', formState)
})
// 重置表单
const onReset = async () => {
  // 重置页码和页容量
  emit('update:page', 1)
  emit('update:pageSize', 10)
  // 重置表单后，重新获取数据
  await formRef.value.resetFields()
  emit('reset', formState)
}
// 树形机构信息
const treeData = ref([])
const getTreeData = async () => {
  const res = await getBusinessHallTreeAPI()

  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}
getTreeData()
// 调度状态
const schedulingStatus = [
  { value: '1', name: '待调度' },
  { value: '2', name: '未匹配线路' },
  { value: '3', name: '已调度' },
]
// 表单数据
const formState = reactive({
  /** 运单编号  */
  orderId: undefined,
  /** 订单编号 */
  id: undefined,
  /** 调度状态 */
  schedulingStatus: undefined,
  /** 起始地机构 */
  startAgencyName: undefined,
  /** 目的地机构 */
  endAgencyName: undefined,
  /** 当前所在机构 */
  currentAgencyName: undefined,
  /** 页码 */
  page: 1,
  /** 页面大小 */
  pageSize: 10,
})
</script>

<style scoped>
.buttons button {
  width: 80px;
  height: 38px;
}
</style>
